<template>
    <section>
        <div style="padding: 15px 0px;">
            <el-form ref="form" :model="form" label-width="50px">
                <el-form-item label="标签">
                    <el-input v-model="form.alias"></el-input>
                </el-form-item>
                <el-form-item label="设备">
                    <div style="color: red"><strong>{{form.name}}</strong></div>
                </el-form-item>
                <el-form-item label="更新">
                     <div>{{time}}</div>
                </el-form-item>
                <el-form-item label="颜色">
                    <el-color-picker v-model="form.color"></el-color-picker>
                </el-form-item>
            </el-form>
            <div id="chartLine" style="width:100%; height:220px;">
            </div>
            <div style="margin-top: 25px">
                <el-button type="primary" icon="el-icon-success" style="float:left; width: 40%" @click="pushCard()"><strong>确 认</strong></el-button>
                <router-link to='/main'>
                    <el-button icon="el-icon-refresh-left" style="margin-left: 7px; width: 40%"><strong>返 回</strong></el-button>
                </router-link>
            </div>
        </div>
    </section>
</template>

<script>

    import echarts from 'echarts'

    import {updateMain, getChartTemp, getChartHum} from '../../api/api';

    export default {
        data: () => ({
            time: "",
            form: {
                name: "",
                alias: "",
                color: ""
            },
            type: "",
            chartLine: null
        }),
        mounted(){
            this.form.name = this.$route.query.name;
            this.form.alias = this.$route.query.alias;
            this.form.color = this.$route.query.color;
            this.time = this.$route.query.time;
            this.type = this.$route.query.type;
            this.getChartData();
        },
        methods: {
            drawLineChart(res) {
                this.chartLine = echarts.init(document.getElementById('chartLine'));
                this.chartLine.setOption({
                    title: {
                        text: '一周数据'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'data',
                            type: 'line',
                            stack: '总量',
                            data: res.data.data
                        }
                    ]
                });
            },
            getChartData() {
                if (this.type == "TEMP") {
                    getChartTemp({name: this.form.name}).then((res) => {
                        this.drawLineChart(res);
                    });
                } else {
                    getChartHum({name: this.form.name}).then((res) => {
                        this.drawLineChart(res);
                    });
                }
            },
            pushCard() {
                if (this.form.color == null || this.form.alias == null || this.form.alias == "") {
                    this.$message({
                        message: "请检查输入",
                        type: 'error',
                        duration: 2000
                    });
                    return 0;
                }
                updateMain(this.form).then((res) => {
                    if (res.code == "SUCCESS") {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 600
                        });
                        this.$router.push({path:"/main"})
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error',
                            duration: 600
                        });
                    }
                });
            }
        }
    }
</script>

<style>

</style>